<template>
  <!--  @mouseover="OperatingWebsite()"-->
  <div @click.stop="fileVerify = false">
    <v-touch v-on:swipeleft="swiperleft" v-on:swiperight="swiperright" class="wrapper">
      <div class="menu-container" ref="menuContainer">
        <!--        消息提醒-->
        <!--        <div @click="notifyck" class="notifyck">-->
        <!--          <i class="el-icon-caret-right" style="color: #fff;font-size: 30px"></i>-->
        <!--        </div>-->
        <!--        消息提醒结束-->
        <div class="content-border">
          <div class="header-title" @dblclick="handleFullScreen">
            <div class="header-logo">
              <img src="../../assets/logo.png" class="header-logo-img" alt="">
              <div class="week" style="display: flex">
                Week（周）:
                <el-date-picker
                  v-model="value1" style="width: 120px;"
                  type="week"
                  format="第 WW 周" value-format="yyyy-MM-dd"
                  placeholder="选择周" @change="weekChange">
                </el-date-picker>
              </div>
              <div class="start-end">{{firstDate}} ~ {{lastDate}}
              </div>
            </div>
            <div class="header-header-title">
              <div class="text-width" @click.stop="fileVerify = true">
                交接班看板
                <div class="file-div" v-if="fileVerify">
                  <select-page @selects="selectsFun"></select-page>
                </div>
              </div>
              <div class="text-width">
                SHIFT HANDOVER
              </div>
            </div>
            <div class="header-vpo" style="">
              <!--              <div class="header-name"></div>-->
              <!--              <span style="margin-right: 20px">{{userInfo.username}}</span>-->
              <div class="header-organ">{{organName}}</div>
              <div class="quit" @click="quit">退出</div>
              <img src="../../assets/aa.jpg" class="header-logo-img-vpo" alt="">
            </div>
          </div>
          <!--内容-->
          <div class="table-content">
            <!--            左侧kpi pi开始-->
            <div class="table-left">
              <div class="table-left-pi">
                <div style="width: 30%;">KPI</div>
                <div style="width: 70%;">PI</div>
              </div>
              <div class="table-left-content">
                <div class="table-left-right">
                  <div v-for="(item,index) in resData" class="pi-td" :key="index">
                    <div class="table-left-right-content leftmini borderR" style="font-size: 12px;">
                      {{item.kpi}}
                    </div>
                    <div class="table-left-right-content rightBig" style="font-size: 12px;">
                      <div class="kpi-txt">
                        {{item.pi}}
                      </div>
                      <div class="fiveS" :class="(index === 4 || index === 1) ? 'backgr' :''" @click="fiveW(index,1)">
                        S
                      </div>
                      <div class="fiveAT" @click="fiveW()">AT</div>
                      <div class="fiveW" @click="fiveW(index,3)">5W</div>
                      <!--<div class="five-num" @click="fiveW(index,3)" v-if="index === 3">1</div>-->
                      <div class="fiveS-num" @click="fiveW(index,3)" v-if="index === 3 && organName != 'QA'">1</div>
                      <div class="fiveAT-num" @click="fiveW(index,1)" v-if="index === 3 && organName != 'QA'">1</div>
                    </div>
                  </div>
                  <div v-for="(item,index) in resDataNum" class="pi-td" :key="index">
                    <div class="table-left-right-content leftmini borderR" style="font-size: 12px;">
                      <!--{{item.kpi}}-->
                    </div>
                    <div class="table-left-right-content rightBig" style="font-size: 12px;">
                      <div class="kpi-txt"></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!--            左侧kpi pi 结束-->
            <div class="table-center">
              <!--              目标、单位开始-->
              <div class="table-center-left">
                <!--表头-->
                <div style="display: flex">
                  <div class="table-center-text" style="border-top-left-radius: 5px;">
                    <div>目标</div>
                    <div style="margin-top: -3px;">Target</div>
                  </div>
                  <div class="table-center-text" style="border-top-right-radius: 5px;">
                    <div>单位</div>
                    <div style="margin-top: -3px;">Unit</div>
                  </div>
                </div>
                <!--内容-->
                <div class="table-center-table">
                  <div v-for="(item,index) in resData" class="table-div" :key="index">
                    <div class="table-center-right-content">
                      <div class="left-border" style="font-size: 12px;">
                        <!-- 0:大于,1:小于,2:等于,3:大于等于,4:小于等于5:不等于-->
                        {{item.warningType == 0 ? ">" : (item.warningType == 1 ? "<" : (item.warningType == 2 ? "" :
                        (item.warningType == 3 ? "≥" : (item.warningType == 4 ? "≤" : (item.warningType == 5 ? "≠" :
                        "")))))}}
                        {{item.target}}
                      </div>
                      <div style="font-size: 12px;">
                        {{item.unit}}
                      </div>
                    </div>
                  </div>
                  <div v-for="(item,index) of (8 - resData.length)" class="table-div" :key="index">
                    <div class="table-center-right-content">
                      <div class="left-border"></div>
                      <div></div>
                    </div>
                  </div>
                </div>
              </div>
              <!--              目标、单位结束-->
              <!--              班次数据开始-->
              <div class="table-center-right">
                <!--                班次表头开始-->
                <week-title></week-title>
                <!--                班次表头结束-->
                <div class="">
                  <!--                  班次数据开始-->
                  <div v-for="(item,index) in bcData" class="table-div" :key="index">
                    <div :class="item.auto == 1 ? 'hui table-center-right-contents' : 'table-center-right-contents'">
                      <div v-for="(items,indexs) in item.data" style="position: relative" :key="indexs">
                        <!-- 0:大于,1:小于,2:等于,3:大于等于,4:小于等于5:不等于-->
                        <div class="flags" v-if="items.colors == 'red'"></div>
                        <!--                        <span v-if="weekNowDay!=items.weekday || item.auto == 1 && !items.edit" style="font-size: 13px;width:90%;height: 86%;display: inline-block" :class="items.colors" @click="pi(items.bcId,item.pi,item)">{{items.results}}</span>-->
                        <!--                        刚<span v-if="!items.edit" style="font-size: 13px;width:90%;height: 86%;display: inline-block" :class="items.colors" @click="pi(items.bcId,item.pi,item)">{{items.results}}</span>-->
                        <!--                        <input style="width:100%;height: 84%;" v-model="items.results" :class="items.colors" v-if="(weekNowDay==items.weekday && item.auto == 0 && !inputVerify) || items.edit"-->
                        <!--                               @click="inpCk" @change="inpChange(items,index,indexs)">-->
                        <!--                        v-if="items.edit"-->
                        <input style="width:100%;height: 84%;" v-model="items.results" :class="items.colors"
                               @click="inpCk" @change="inpChange(items,index,indexs,item)">
                        <!--                        <span v-if="!items.edit" style="font-size: 13px;" :class="items.colors" @click="pi(items.bcId,item.pi,item)">{{items.results}}</span>-->
                        <!--                        <span v-if="weekNowDay==items.weekday && item.auto == 0 && inputVerify && !items.edit" style="font-size: 13px;" :class="items.colors" @click="pi(items.bcId,item.pi,item)">{{items.results}}</span>-->
                      </div>
                    </div>
                  </div>
                  <!--                  班次数据结束-->
                  <!--                  班次数据固定为八行数据不足时循环出空表格-->
                  <div v-for="(item,index) in (8 - bcData.length)" class="table-div" :key="index">
                    <blank-page></blank-page>
                  </div>
                  <!--                  空班次数据结束-->
                </div>
              </div>
              <!--              班次数据结束-->
              <!--              <div class="table-right">-->
              <!--                <div class="table-left-remark">-->
              <!--                  <div>备注</div>-->
              <!--                  <div style="margin-top: -3px;">Remark</div>-->
              <!--                </div>-->
              <!--                <div class="table-right-content">-->
              <!--                  <div v-for="item of 8 ">-->
              <!--                    <div class="table-left-right-contents"></div>-->
              <!--                  </div>-->
              <!--                </div>-->
              <!--              </div>-->
            </div>
          </div>
          <!--安全优先类-->
          <div class="safety">
            <!--            安全优先项开始-->
            <section style="margin-right: 5px">
              <div class="safety-title">
                安全优先项
                <div>Safety Priorities</div>
              </div>
              <div style="height: 100px;overflow: hidden">
                <!--                <div class="Priorities" v-for="item in exceedList">-->
                <!--                  <div style="height: 50px;" class="Priorities-two">-->
                <!--                    <div class="Priorities-two-div">-->
                <!--                      <div :class="item.answer ? 'blackColor' : ''" @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)">{{item.question}}</div>-->
                <!--                      <img src="../../assets/more.png" alt="" v-if="!item.answer" @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)">-->
                <!--                      <img src="../../assets/send.png" alt="" @click="send">-->
                <!--                    </div>-->
                <!--                    <div class="Priorities-two-div">-->
                <!--                      <div @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)"><span v-for="items in item.answer" style="color: green;">{{items}},</span></div>-->
                <!--&lt;!&ndash;                      <img src="../../assets/more.png" alt="" v-if="item.answer">&ndash;&gt;-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                </div>-->
                <!--                <div class="Priorities" v-for="item of exceedNum">-->
                <!--                </div>-->
                <div class="Priorities" v-for="(item,index) in 4" :key="index">
                  <div style="height: 25px;" class="Priorities-two">
                    <div class="Priorities-two-div">
                      <div style="color: #000">
                        <span v-if="index === 0">安全隐患整改后确认（地面修复）</span>
                        <span v-if="index === 1">安全隐患提报数量</span>
                        <span v-if="index === 2">防暑降温饮品使用情况（必须使用）</span>
                        <span v-if="index === 3"></span>
                      </div>
                      <!--                      <img src="../../assets/more.png" alt="" v-if="!item.answer" @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)">-->
                      <!--                      <img src="../../assets/send.png" alt="" @click="send">-->
                    </div>
                    <!--                    <div class="Priorities-two-div">-->
                    <!--                      <div @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)"><span v-for="items in item.answer" style="color: green;">{{items}},</span></div>-->
                    <!--                      <img src="../../assets/more.png" alt="" v-if="item.answer">-->
                    <!--                    </div>-->
                  </div>
                </div>
              </div>
            </section>
            <!--            安全优先项结束-->
            <!--            质量优先项开始-->
            <section style="margin-right: 5px">
              <div class="safety-title">
                质量优先项
                <div>Quality Priorities</div>
              </div>
              <div style="height: 100px;overflow: hidden">
                <!--                <div class="Priorities" v-for="item in exceedzlList">-->
                <!--                  <div style="height: 50px;" class="Priorities-two">-->
                <!--                    <div class="Priorities-two-div">-->
                <!--                      <div :class="item.answer ? 'blackColor' : ''" @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)">{{item.question}}</div>-->
                <!--                      <img src="../../assets/more.png" alt="" v-if="!item.answer" @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)">-->
                <!--                      <img src="../../assets/send.png" alt="" @click="send">-->
                <!--                    </div>-->
                <!--                    <div class="Priorities-two-div">-->
                <!--                      <div @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)"><span v-for="items in item.answer" style="color: green;">{{items}},</span></div>-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                </div>-->
                <!--                <div class="Priorities" v-for="item of exceedzlNum"></div>-->
                <div class="Priorities" v-for="item in quality">
                  <div style="height: 25px;" class="Priorities-two">
                    <div class="Priorities-two-div">
                      <div>
                        <input type="text" style="width: 100%;height: 20px;font-size: 14px"
                               :class="item.enable === 0 ? 'enablered' : ''" v-model="item.remark"
                               @change="qualityChange(item)">
                      </div>
                      <img src="../../assets/send.png" alt="" @click="send(item,0)" v-if="item.remark">
                    </div>
                  </div>
                </div>
                <div class="Priorities" v-for="item in exceedzlNumList">
                  <div style="height: 25px;" class="Priorities-two">
                    <div class="Priorities-two-div">
                      <div>
                        <input type="text" style="width: 100%;height: 20px" v-model="item.remark"
                               @change="qualityChange(item)">
                      </div>
                      <img src="../../assets/send.png" alt="" @click="send(item,0)" v-if="item.remark">
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <!--            质量优先项结束-->
            <!--            班组TOP3优先项开始-->
            <section style="margin-right: 5px">
              <div class="safety-title">
                班组TOP3优先项
                <div>TOP3 Shift Priorities</div>
              </div>
              <div style="height: 100px;overflow: hidden">
                <div class="Priorities" v-for="item in exceedbzList">
                  <div style="height: 50px;" class="Priorities-two">
                    <div class="Priorities-two-div">
                      <div :class="item.answer ? 'blackColor' : ''" style="color: #000"
                           @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)">{{item.question}}
                      </div>
                      <!--                      <img src="../../assets/more.png" alt="" v-if="!item.answer"-->
                      <!--                           @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)">-->
                      <!--                      <img src="../../assets/send.png" alt="" @click="send(item,1)">-->
                    </div>
                    <div class="Priorities-two-div">
                      <div @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)"><span
                        v-for="items in item.answer" style="color: green;">{{items}},</span></div>
                      <!--                      <img src="../../assets/more.png" alt="" v-if="item.answer">-->
                    </div>
                  </div>
                  <!--                  <div class="priorities-div">-->
                  <!--                    <div>{{item.question}}</div>-->
                  <!--                    <img src="../../assets/more.png" alt="">-->
                  <!--                  </div>-->
                  <!--                  <div class="priorities-div">-->
                  <!--                    <div>{{item.answer}}</div>-->
                  <!--                    <img src="../../assets/more.png" alt="">-->
                  <!--                  </div>-->
                </div>
                <div class="Priorities" v-for="item of exceedbzNum"></div>
              </div>
            </section>
            <!--            班组TOP3优先项结束-->
            <!--            维护需求开始-->
            <section>
              <div class="safety-title">
                维护需求
                <div>Maintenance Requirements</div>
              </div>
              <div style="height: 100px;overflow: hidden">
                <!--<div class="Priorities" v-for="item in exceedwhList">-->
                <!--   <div style="height: 50px;" class="Priorities-two">-->
                <!--       <div class="Priorities-two-div">-->
                <!--            <div :class="item.answer ? 'blackColor' : ''" @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)">{{item.question}}</div>-->
                <!--                 <img src="../../assets/more.png" alt="" v-if="!item.answer" @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)">-->
                <!--                 <img src="../../assets/send.png" alt="" @click="send">-->
                <!--                    </div>-->
                <!--                    <div class="Priorities-two-div">-->
                <!--                      <div @click="txtck(item.question,'noClose',item.bcId,item.piId,item.answer)"><span v-for="(items,inde) in item.answer" style="color: green;">{{items}}</span>,</div>-->
                <!--                    </div>-->
                <!--                  </div>-->
                <!--                </div>-->
                <!--                <div class="Priorities" v-for="item of exceedwhNum"></div>-->
                <div class="Priorities" v-for="(item,index) in 4">
                  <div style="height: 25px;" class="Priorities-two">
                    <div class="Priorities-two-div">
                      <div style="color: #000;">
                        <span v-if="index === 0">检测设备稳定性（换线后调整时间较长）</span>
                        <span v-if="index === 1">电器故障因为线路问题持续在增加</span>
                        <span v-if="index === 2"></span>
                        <span v-if="index === 3"></span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </section>
            <!--            维护需求结束-->
          </div>
          <!--计划项-->
          <div class="plan">
            <section class="plan-left">
              <div class="safety-titlet">
                <!--                <div>-->
                <!--                @click="uploadFun"-->
                <span>生产/维护计划 <div>Production/Mai Plan</div></span>
                <!--                </div>-->
                <!--                <i class="el-icon-circle-plus" style="color: #e05800"></i>-->
              </div>
              <div style="width: 100%;height: calc(100% - 32px);box-sizing: border-box;padding: 10px;">
                <img src="../../assets/ces.jpg" alt="" style="width: 100%;height: 100%;" @click="scheduler(1)">
              </div>
            </section>
            <section class="plan-center">
              <div class="safety-titlet">
                触发条件
                <div>Triggers</div>
              </div>
              <div style="width: 100%;height: calc(100% - 32px);box-sizing: border-box;padding: 10px;"
                   @click="scheduler(2)">
                <img src="../../assets/2.png" alt="" style="width: 100%;height: 100%;">
              </div>
            </section>
            <section class="plan-right">
              <div class="safety-titles" style="background-color: #325194">
                <div>线重点关注</div>
                <div style="margin-top: -3px;">Key Actions</div>
                <!--                @click="refresh"-->
                <img src="../../assets/add.png" @click="send('aa',1)"
                     style="width: 20px;height: 20px;position: absolute;right: 10px;top: 5px;" alt="" v-if="imgVerify">
              </div>
              <div class="emphasis">
                <section class="plan-select">
                  <div class="safety-titles" style="padding-top: 7px">
                    <input type="checkbox">
                    <!--                    <div style="margin-top: -3px;">Topic</div>-->
                  </div>
                </section>
                <section class="theme">
                  <div class="safety-titles">
                    <div>主题</div>
                    <div style="margin-top: -3px;">Topic</div>
                  </div>
                </section>
                <section class="action">
                  <div class="safety-titles">
                    <div>行动计划</div>
                    <div style="margin-top: -3px;">Action Plan</div>
                  </div>
                </section>
                <section class="person">
                  <div class="safety-titles">
                    <div>责任人</div>
                    <div style="margin-top: -3px;">Owner</div>
                  </div>
                </section>
                <section class="accomplish">
                  <div class="safety-titles">
                    <div>完成时间</div>
                    <div style="margin-top: -3px;">Due Date</div>
                  </div>
                </section>
                <section class="plan-remark">
                  <div class="safety-titles">
                    <div>备注</div>
                    <div style="margin-top: -3px;">Remark</div>
                  </div>
                </section>
              </div>
              <div v-for="item in TeamhotSpotsList">
                <div style="display: flex">
                  <div class="plan-select sectt">
                    <input type="checkbox" @change="actionSelect(item.checkedVerify,item)" v-model="item.checkedVerify">
                  </div>
                  <!--                  @click="txtck(item.topic,'close')"-->
                  <!--                  @click="txtck(item.actionPlan,'close')"-->
                  <div class="theme sectt">
                    <input type="text" v-model="item.topic" class="TeamhotSpots" @change="emphasisChange(item)">
                  </div>
                  <div class="action sectt">
                    <input type="text" v-model="item.actionPlan" class="TeamhotSpots" @change="emphasisChange(item)">
                  </div>
                  <div class="person sectt">
                    <input type="text" v-model="item.wener" class="TeamhotSpots" @change="emphasisChange(item)">
                  </div>
                  <div class="accomplish sectt">
                    <input type="text" v-model="item.dueDate" @change="emphasisChange(item)" class="TeamhotSpots">
                  </div>
                  <div class="plan-remark sectt">
                    <input type="text" v-model="item.remark" @change="emphasisChange(item)" class="TeamhotSpots">
                  </div>
                </div>
              </div>
              <div v-for="item in numlist">
                <div style="display: flex">
                  <!--                  <el-checkbox @change="actionSelect($event,item)"></el-checkbox>-->
                  <div class="plan-select sectt">
                    <input type="checkbox" @change="actionSelect(item.checkedVerify,item)" v-model="item.checkedVerify">
                  </div>
                  <div class="theme sectt">
                    <input type="text" class="emphasis-input" @change="emphasisChange(item)" v-model="item.topic">
                  </div>
                  <div class="action sectt">
                    <input type="text" class="emphasis-input" @change="emphasisChange(item)" v-model="item.actionPlan">
                  </div>
                  <div class="person sectt">
                    <input type="text" class="emphasis-input" @change="emphasisChange(item)" v-model="item.wener">
                  </div>
                  <div class="accomplish sectt">
                    <input type="text" class="emphasis-input" v-model="item.dueDate" @change="emphasisChange(item)">
                  </div>
                  <div class="plan-remark sectt">
                    <input type="text" class="emphasis-input" v-model="item.remark" @change="emphasisChange(item)">
                  </div>
                </div>
              </div>
            </section>
          </div>
        </div>
        <footer-page :serialnumber="serialnumber" :timevalue="timevalue"></footer-page>
      </div>

    </v-touch>
    <div class="loadings" @click.stop="txtVerify = false;" v-if="txtVerify">
      <div class="txt" @click.stop="" style="height:550px">
        答案/反应库
        <tree-page @treeFn="treeFun" :answertree="answertree" :txts="txt"></tree-page>
        <!--        <div v-show="closeVerify" id="treeEcharts" style="width: 33vw;height: 30vh;"></div>-->
        <div style="" v-show="closeVerify">
          <!--          handleClose-->
          <el-button @click="txtVerify = false">关闭</el-button>
          <el-button type="danger" @click="saveTree">保存</el-button>
          <!--          <el-button type="danger" @click="centerDialogVisible = true">分析问题</el-button>-->
        </div>
      </div>
    </div>
    <div class="loadings" @click.stop="apcVerify = false;" v-show="apcVerify">
      <div class="echarts-content" @click.stop="echartcontent">
        <div class="echarts-title">
          <div class="echarts-main">
            <div class="select-sapn" @click.stop="selectCk">
              <div>{{selectValue}}</div>
              <img src="../../assets/jian.png" class="select-img" alt="">
            </div>
          </div>
          <div class="select-content" v-if="selectVerify">
            <div class="options" v-for="item in resData" @click.stop="options(item.pi,item.piId)">
              {{item.pi}}
            </div>
          </div>
        </div>
        <div id="echarts-two"></div>
        <div class="dates">
          <div v-for="(item,index) in dateList" @click="dateCk(index,item)" :class="tabIndex == index ? 'bcg' : ''"
               style="cursor: pointer">{{item}}
          </div>
        </div>
      </div>
    </div>
    <!--    生产/维护计划 触发条件 弹框-->
    <div class="shuffling-content" v-if="shufflingVerify" @click="shufflingCk">
      <div class="shuffling">
        <div class="iframe-content">
          <!--<iframe class="show-iframe" frameborder=0 name="showHere" scrolling=auto-->
          <!--src="http://192.168.1.107:8081/生产计划.xls" v-if="shufflingNum==1"></iframe>-->
          <img src="../../assets/ces.jpg" style="width: 900px;height: 650px;" alt="" v-if="shufflingNum==1">
          <img src="../../assets/2.png" style="width: 900px;height: 650px;" alt="" v-if="shufflingNum==2">
          <!--          <img src="../../assets/ces.jpg" style="width: 900px;height: 650px;" alt="" v-if="shufflingNum==2">-->
        </div>
      </div>
    </div>
    <!--信息共享-->
    <el-dialog
      title="信息共享"
      :visible.sync="centerDialogVisible"
      width="660px" height="800px"
      center>
      <!--          width="1300px" height="800px"-->
      <plan :sendarr="sendarr" :qualityobj="qualityobj" :types="types" @onSubmit="onSubmitFn"
            @closePlan="closePlanFn"></plan>
      <!--          <iframe width="100%" height="600px" src="http://47.105.123.244:8081/ap/add/OtherPageIn?createdBy=4302&brewery=90012691&secretKey=rrgSUdYhz3oM0c8swVCWKA==" frameborder="0"></iframe>-->
    </el-dialog>
    <!--    <el-dialog-->
    <!--      title="5Why分析"-->
    <!--      :visible.sync="centerDialogVisible"-->
    <!--      width="900px" height="800px"-->
    <!--      center>-->
    <!--      <el-dialog-->
    <!--        width="30%"-->
    <!--        title="发送"-->
    <!--        :visible.sync="innerVisible" center-->
    <!--        append-to-body>-->
    <!--        <el-form ref="form" :model="form" label-width="80px">-->
    <!--          <el-form-item label="部门">-->
    <!--            <el-select v-model="form.department" placeholder="请选择部门">-->
    <!--              <el-option label="QA" value="QA"></el-option>-->
    <!--              <el-option label="包装" value="bz"></el-option>-->
    <!--              <el-option label="酿造" value="nz"></el-option>-->
    <!--              <el-option label="动力" value="dl"></el-option>-->
    <!--              <el-option label="物流" value="wl"></el-option>-->
    <!--            </el-select>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="岗位">-->
    <!--            <el-select v-model="form.post" placeholder="请选择岗位">-->
    <!--              <el-option label="班长" value="shanghai"></el-option>-->
    <!--              <el-option label="组长" value="beijing"></el-option>-->
    <!--            </el-select>-->
    <!--          </el-form-item>-->
    <!--          <el-form-item label="人员">-->
    <!--            <el-select v-model="form.personnel" placeholder="请选择人员">-->
    <!--              <el-option label="张三" value="shanghai"></el-option>-->
    <!--              <el-option label="李四" value="beijing"></el-option>-->
    <!--            </el-select>-->
    <!--          </el-form-item>-->
    <!--        </el-form>-->
    <!--        <span slot="footer" class="dialog-footer">-->
    <!--        <el-button @click="innerVisible = false">取 消</el-button>-->
    <!--        <el-button type="danger" @click="innerVisible = false">确 定</el-button>-->
    <!--      </span>-->
    <!--      </el-dialog>-->
    <!--      <table class="abnormal">-->
    <!--        <tr>-->
    <!--          <td class="abnormal-one-td-bcg">日期</td>-->
    <!--          <td class="abnormal-one-td-bcg">班</td>-->
    <!--          <td class="abnormal-one-td-bcg">时间</td>-->
    <!--        </tr>-->
    <!--        <tr>-->
    <!--          <td class="abnormal-one-td-content">2019-7-22</td>-->
    <!--          <td class="abnormal-one-td-content">001</td>-->
    <!--          <td class="abnormal-one-td-content">08:30</td>-->
    <!--        </tr>-->
    <!--        <tr>-->
    <!--          <td>部门：</td>-->
    <!--          <td>线/区域：</td>-->
    <!--          <td>设备/机器</td>-->
    <!--        </tr>-->
    <!--        <tr>-->
    <!--          <td>包装</td>-->
    <!--          <td>包装1线</td>-->
    <!--          <td>洗瓶机</td>-->
    <!--        </tr>-->
    <!--      </table>-->
    <!--      <div>-->
    <!--        <div class="abnormal-info">触发条件信息</div>-->
    <!--        <div class="trigger">-->
    <!--          <div>触发：</div>-->
    <!--          <div>当班FBI剔除不合格品率超标</div>-->
    <!--        </div>-->
    <!--        <div class="abnormal-info">最初采取的控制问题或使程序正常运转的措施是什么？</div>-->
    <!--        <div class="measures"></div>-->
    <!--        <div class="abnormal-info">5个为什么分析：问题的根本原因是什么？</div>-->
    <!--        <div class="personnel">-->
    <!--          <div class="personnel-title">参加人员：</div>-->
    <!--          <div class="personnel-num"></div>-->
    <!--        </div>-->
    <!--        <div style="text-align: center;display: flex">-->
    <!--          <div style="width: 60%;" class="abnormal-info">回答5个为什么</div>-->
    <!--          <div style="width: 40%;" class="abnormal-info">证据：你怎么知道这就是“为什么”的答案？</div>-->
    <!--        </div>-->
    <!--        <table class="abnormal">-->
    <!--          <tr>-->
    <!--            <td>1</td>-->
    <!--            <td style="width: 120px;">为什么当班FBI剔除不合格品率</td>-->
    <!--            <td style="padding: 0;">-->
    <!--              <table class="abnormal-two">-->
    <!--                <tr>-->
    <!--                  <td style="height: 20px"></td>-->
    <!--                </tr>-->
    <!--                <tr>-->
    <!--                  <td style="border-bottom: none;height: 20px"></td>-->
    <!--                </tr>-->
    <!--              </table>-->
    <!--            </td>-->
    <!--            <td style="width: 120px;">点击上传</td>-->
    <!--          </tr>-->
    <!--          <tr v-for="(item,index) in 4">-->
    <!--            <td>{{index+2}}</td>-->
    <!--            <td></td>-->
    <!--            <td style="padding: 0;">-->
    <!--              <table class="abnormal-two">-->
    <!--                <tr>-->
    <!--                  <td style="width: 120px;height: 20px"></td>-->
    <!--                </tr>-->
    <!--                <tr>-->
    <!--                  <td style="border-bottom: none;height: 20px"></td>-->
    <!--                </tr>-->
    <!--              </table>-->
    <!--            </td>-->
    <!--            <td style="width: 120px;"></td>-->
    <!--          </tr>-->
    <!--        </table>-->
    <!--        <table class="abnormal" style="margin-top: 20px;">-->
    <!--          <tr>-->
    <!--            <td class="abnormal-one-td-bcg">主题</td>-->
    <!--            <td class="abnormal-one-td-bcg">行动计划</td>-->
    <!--            <td class="abnormal-one-td-bcg">责任人</td>-->
    <!--          </tr>-->
    <!--          <tr>-->
    <!--            <td style="height: 20px;">-->
    <!--              <input type="text" style="width: 100%;" v-model="addSpots.topic">-->
    <!--            </td>-->
    <!--            <td>-->
    <!--              <input type="text" style="width: 100%;" v-model="addSpots.actionPlan">-->
    <!--            </td>-->
    <!--            <td>-->
    <!--              <input type="text" style="width: 100%;" v-model="addSpots.wener">-->
    <!--            </td>-->
    <!--          </tr>-->
    <!--        </table>-->
    <!--        <div style="margin-left: 22vw;margin-top: 10px">-->
    <!--          <el-button @click="saveck">保存</el-button>-->
    <!--          <el-button type="danger" @click="innerVisible = true">发送</el-button>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
    <!--    <el-dialog-->
    <!--    title="上传文件"-->
    <!--    :visible.sync="uploadVerify"-->
    <!--    width="900px" height="800px"-->
    <!--    center>-->
    <!--      <el-upload-->
    <!--        class="upload-demo" style="margin-left: 250px"-->
    <!--        drag ref="upload" :file-list="fileList"-->
    <!--        action="https://jsonplaceholder.typicode.com/posts/"-->
    <!--        multiple>-->
    <!--        <i class="el-icon-upload"></i>-->
    <!--        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
    <!--        &lt;!&ndash;        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>&ndash;&gt;-->
    <!--      </el-upload>-->
    <!--      <div style="margin-left: 22vw;margin-top: 10px">-->
    <!--        <el-button @click="uploadVerify = false">取消</el-button>-->
    <!--        <el-button type="danger" @click="fileSave">保存</el-button>-->
    <!--      </div>-->
    <!--    </el-dialog>-->
    <!--    异常pi-->
    <anomaly-pi :ver="piVerify" :abnormaltitle="abnormaltitle" :abnormalarr="abnormalArr" @vers="versFn"></anomaly-pi>
    <!--    pi 5w-->
    <!--    <div class="shuffling-content">-->
    <!--      <iframe width="100%" style="overflow-x: scroll;margin-top: 20px" height="580px" src='http://47.105.123.244:8081/AT5W/My5W/OtherPageIn?mId=""&createdBy=4302&brewery=90012691&department=10021861&area=10021862&classNum=2&device=3464&triggerCondition=1720&piInfo=E7DECC8C-FE08-49FE-B696-074B6C2708C9&secretKey=rrgSUdYhz3oM0c8swVCWKA==' frameborder="0"></iframe>-->
    <!--    </div>-->
    <!--    5w sic at iframe-->
    <five-page :fiveverify="fiveverify" :fivenum="fiveNum" :adfiveid="adfiveid" @closeFive="closeFiveFn"></five-page>
  </div>
</template>

<script>
  import selectPage from './select'
  import anomalyPi from './packing/anomalyPi'
  import treePage from './packing/treePage'
  import plan from './packing/plan';//5s弹框
  import fivePage from './packing/fivePage';//pi 5w
  import footerPage from './basic/footer'//底部信息
  import weekTitle from './packing/weekTitle' //周表头
  import blankPage from './packing/blank' //星期空白格

  export default {
    name: "packaging",
    components: {
      selectPage,
      anomalyPi,
      treePage,
      plan,
      fivePage,
      footerPage,
      weekTitle,
      blankPage
    },
    data() {
      return {
        serialnumber: 5,
        timevalue: "",
        types: 0,//0是质量优先项 1是线重点关注
        qualityobj: {},
        checkedVerify: false,
        // 异常pi
        piVerify: false,
        uploadVerify: false,//上传文件显示隐藏
        bcId: "",//点击安全优化项时的bcId
        piId: "",//点击安全优化项时的piid
        closeVerify: false,//安全优化项 质量优先项  。。。 时显示   线重点关注时隐藏（弹框内图表与按钮）
        addSpots: {type: 1, topic: "", actionPlan: "", wener: ""},//分析问题  5why分析保存参数
        form: {department: "QA", post: "", personnel: ""},//分析问题  5why分析点发送时弹框内参数
        innerVisible: false,//分析问题  5why分析点发送 弹框的显示隐藏、
        fileVerify: false,//表头下拉的显示隐藏
        txt: "",//点击安全优化项内容时弹出的文本
        txtVerify: false,//安全优化项显示隐藏
        selectValue: "",//pi弹框内下拉显示名
        optionPiId: "",//pi弹框内下拉提交参数
        selectVerify: false,//pi图表内下拉的显示隐藏
        fullscreen: false,
        rightVerify: false,
        leftVerify: true,
        shufflingVerify: false,
        centerDialogVisible: false,
        apcVerify: false,
        dateList: ["本周", "本年"],
        tabIndex: 1,
        val: "",
        colo: "yellow",
        week: "",
        value1: "",//week周日期
        inputVerify: false,
        imgVerify: true,
        resData: [],//pi 目标 单位 mon tue...数据
        bcData: [],//mon tue...数据
        TeamhotSpotsList: [],//线重点关注,
        numlist: [],//线重点关注小于4时有几行单元格,
        exceedList: [],// 安全优化选项
        exceedNum: 0,//安全优化项小于4时有几行单元格
        exceedzlList: [],//质量优先项
        exceedzlNum: 0,//质量优先项小于4时有几行单元格
        exceedzlNumList: [],
        exceedbzList: [],//班组TOP3
        exceedbzNum: 0,//班组TOP3小于4时有几行单元格
        exceedwhList: [],//维护需求
        exceedwhNum: 0,//维护需求小于4时有几行单元格
        monthList: [],//pi弹框内统计图数据
        weekLab: "本年",//pi弹框内统计图按周按月
        weekNowDay: 0,//当前是周几
        instance: "",//消息弹出框
        errorMsg: "不安全行为超标【星期一第2班次，值为2】",//消息弹出框内容
        currentTime: new Date().getTime(),
        fileList: [],
        treeIds: [],
        answertree: [],//树回显
        abnormaltitle: "",//异常弹框标题
        abnormalArr: [],//异常pi弹框数组
        sendarr: [],
        fiveverify: false,
        shufflingNum: 1,
        userInfo: {},
        adfiveid: "",//at5w
        fiveNum: 0,
        resDataNum: 0,
        quality: [],
        qualityNum: 0,
        organName: "",
        firstDate: "",
        lastDate: "",
      }
    },
    created() {
      // 调用页面有无操作
      // this.isTimeOut();
    },
    watch: {
      // 监听文本输入框数据的变化
      val(val) {
        if (val > 2) {
          this.colo = "red";
        } else if (val == 2) {
          this.colo = "yellow";
        } else {
          this.colo = "white";
        }
      }
    },
    mounted() {
      let that = this;
      that.userInfo = JSON.parse(localStorage.getItem("userInfo"));
      that.organName = JSON.parse(localStorage.getItem("userInfo")).userInfo.organName;
      // 默认渲染当前周
      // that.value1 = that.getNowFormatDate();
      that.value1 = '2019-08-12';
      // 获取pi 目标数据
      that.loadFun();
      // 获取线重点对象
      that.getSpot();
      // 获取当前是星期几
      that.weekNowDay = that.getWeekDate();
      // 获取at5w
      that.atFiveW();
      // 获取质量优先项
      // 质量优先选项
      that.qualitys();
      // 获取当前周第一天
      that.firstDate = that.showWeekFirstDay(that.value1);
      // 获取当前周最后一天
      that.lastDate = that.showWeekLastDay(that.value1);

      that.timevalue = that.value1;
    },
    methods: {
      // 线重点关注编辑新增
      emphasisChange(obj) {
        let objs = {
          actionPlan: obj.actionPlan,
          dueDate: obj.dueDate,
          remark: obj.remark,
          topic: obj.topic,
          wener: obj.wener,
          id: obj.id
        }
        let that = this;
        that.$post('/pi/spots/inner/saveOrUpdate', objs)
          .then((response) => {
            that.getSpot();
          }).catch(err => {
          that.$message.error(err);
        })
      },
      // 质量优先项发送
      sendquality(obj) {
        let that = this;
        let arr = [{qualityId: obj.qualityId, belong: ""}];
        that.$post('pi/data/quality/send', arr)
          .then((response) => {
            that.quality = response.data;
            that.qualityNum = 4 - that.quality.length;
            let lengths = that.quality.length;
            for (let i = 0; i < lengths; i++) {
              that.exceedzlNumList.push({remark: ""});
            }
          }).catch(err => {
          that.$message.error(err);
        })
      },
      // 质量优先选项
      qualitys() {
        let that = this;
        that.$post('pi/data/quality/query', null)
          .then((response) => {
            that.quality = response.data;
            that.qualityNum = 4 - that.quality.length;
            let lengths = that.qualityNum;
            for (let i = 0; i < lengths; i++) {
              that.exceedzlNumList.push({remark: ""});
            }
          }).catch(err => {
          that.$message.error(err);
        })
      },
      // 质量优先项新增编辑
      qualityChange(val) {
        let that = this;
        // qualityId有值是编辑 没有则新增
        if (val.qualityId) {
          // 编辑
          that.$post('pi/data/quality/edit', {qualityId: val.qualityId, remark: val.remark})
            .then((response) => {
              that.$message({
                message: "编辑成功",
                type: 'success'
              });
              that.qualitys();
            }).catch(err => {
            that.$message.error(err);
          })
        } else {
          // 新增
          let formDate = new FormData();
          formDate.append('remark', val.remark);
          that.$post('pi/data/quality/save', formDate)
            .then((response) => {
              that.$message({
                message: "新增成功",
                type: 'success'
              });
              let leng = that.exceedzlNumList.length;
              that.exceedzlNumList = [];
              for (let i = 0; i < leng; i++) {
                that.exceedzlNumList.push({remark: ""});
              }
              that.qualitys();
            }).catch(err => {
            that.$message.error(err);
          })
        }
      },
      // 获取at5w
      atFiveW() {
        let that = this;
        that.$post('pi/data/at5w', null)
          .then((response) => {
            that.adfiveid = response.msg;
          }).catch(err => {
          that.$message.error(err);
        })
      },
      // pi 5w打开时触发
      fiveW(index, val) {
        if (this.organName === 'QA') {
          return
        }
        if (index === 3 && val === 3) {
          this.fiveNum = val;
          this.fiveverify = true;
        } else if (index === 3 && val === 1) {
          this.fiveNum = val;
          this.fiveverify = true;
        } else if (index === 2 && val === 2) {
          this.fiveNum = val;
          this.fiveverify = true;
        }
      },
      // pi 5w关闭时触发
      closeFiveFn() {
        this.fiveverify = false;
      },
      // 线重点关注勾选框勾选时触发
      actionSelect(event, e) {
        let that = this;
        // that.sendarr.push(e)
        // for(let i = 0;i < that.sendarr.length;i++){
        //   if(e.topic == that.sendarr[i].topic){
        //     that.sendarr.splice(1,i)
        //   }
        // }
        if (event) {
          that.sendarr.push(e);
        } else {
          for (let i = 0; i < that.sendarr.length; i++) {
            if (e.topic == that.sendarr[i].topic) {
              that.sendarr.splice(1, i);
            }
          }
        }
      },
      // 安全优化项发送
      send(obj, index) {
        if (index === 0) {
          this.qualityobj = obj;
          let that = this;
          if (obj.enable === 0) {
            that.$post('pi/data/quality/enable', {qualityId: obj.qualityId})
              .then((response) => {
                that.qualitys();
              }).catch(err => {
              that.$message.error(err);
            })
          }
        } else if (index === 1) {
        }
        this.types = index;
        this.centerDialogVisible = true;
      },
      // 保存树
      saveTree() {
        // txtVerify
        let that = this;
        let trees = that.treeIds;
        let arr = [];
        for (let i = 0; i < trees.length; i++) {
          if (arr.indexOf(trees[i]) == -1) {
            arr.push(trees[i]);
          }
        }
        let data = {
          bcId: that.bcId,
          answerList: arr
        }
        that.$post('pi/data/update/answer', data)
          .then((response) => {
            that.$message({
              message: response.msg,
              type: 'success'
            });

            // 获取安全优化选项
            that.exceed(0);
            that.exceedOne(0);
            that.exceedTwo(0);
            that.exceedThree(0);
            that.txtVerify = false;
          }).catch(err => {
          that.$message.error(err);
        })
      },
      treeFun(e) {
        this.treeIds = [];
        this.treeIds = e;
      },
      forever() {
        let t;
        let that = this;
        clearTimeout(t);
        t = setTimeout(() => {
          that.loadFun();
          that.forever();
        }, 5 * 60 * 1000);
      },
      // 异常pi弹框
      pi(bcId, pi, obj) {// 获取安全优化选项
        if (!bcId) {
          return;
        }
        let that = this;
        let res = that.resData;
        let piIds = [];
        // for (let i = 0; i < res.length; i++) {
        //   if (res[i].piId == "81400862966022144") {
        //     piIds.push(res[i].piId)
        //   } else if (res[i].piId == "81405157383864320" || res[i].piId == "81405491338543104" || res[i].piId == "68485743508455424" || res[i].piId == "81403528035172352") {
        //     piIdsTwo.push(res[i].piId)
        //   } else if (res[i].piId == '81405722117537792' || res[i].piId == '68754753919647744') {
        //     piIdsThree.push(res[i].piId)
        //   } else if (res[i].piId == '81410102233399296') {
        //     piIdsFour.push(res[i].piId)
        //   }
        // }
        for (let i = 0; i < res.length; i++) {
          if (obj.piId == "81400862966022144") {
            piIds.push(res[i].piId);
            that.abnormaltitle = "安全优化选项";
          } else if (obj.piId == "81405157383864320" || obj.piId == "81405491338543104" || obj.piId == "68485743508455424" || obj.piId == "81403528035172352") {
            piIds.push(res[i].piId);
            that.abnormaltitle = "质量优先项";
          } else if (obj.piId == '81405722117537792' || obj.piId == '68754753919647744') {
            piIds.push(res[i].piId);
            that.abnormaltitle = "班组TOP3优先项";
          } else if (obj.piId == '81410102233399296') {
            piIds.push(res[i].piId);
            that.abnormaltitle = "维护需求";
          }
        }
        let formDateTwo = new FormData();
        formDateTwo.append("piIds", piIds.join(","));
        formDateTwo.append("bcId", bcId);
        // 质量优先选项
        that.$post('pi/data/getBcExceed', formDateTwo)
          .then((response) => {
            that.abnormalArr = response.data;
          }).catch(err => {
          that.$message.error(err);
        })
        that.piVerify = true;
      },
      versFn() {
        this.piVerify = false;
      },
      // 上传文件
      uploadFun() {
        this.uploadVerify = true;
      },
      // 上传文件保存
      fileSave() {
        this.uploadVerify = false;
        this.$refs.upload.clearFiles();
        this.$message({
          message: "上传成功",
          type: 'success'
        });
      },
      // 页面无操作时触发
      OperatingWebsite() {
        let currentTime = this.currentTime;
        let lastTime = new Date().getTime();
        let timeOut = 10000; //设置时间 10分钟
        if (lastTime - currentTime > timeOut) {
          // 未操作页面，跳转登录页面
          this.currentTime = new Date().getTime();
          const fullPath = this.$route.fullPath;
          // const query = this.$Base64.encode(fullPath);
          this.$router.push({
            path: "./sdca",
            query: {
              type: 'query'
            }
          });
        } else {
          this.currentTime = new Date().getTime();
        }

        // const truthPathQuery = this.$route.query.type;
        // const truthPath = this.$Base64.decode(truthPathQuery); //点击登录的时候跳转这个地址
      },
      // 弹出消息提示框
      notifyck() {
        if (this.instance) {
          this.$message.error("以打开消息提示");
          return
        }
        // 弹出时 提示音
        this.audio = new Audio();
        this.audio.src = 'http://img.tukuppt.com/newpreview_music/08/99/00/5c88d4aba91e479455.mp3';
        // this.audio.src = '../../assets/ts.mp3'
        let playPromise;
        playPromise = this.audio.play();
        // 提示音结束
        const h = this.$createElement;
        this.instance = this.$notify({
          title: '消息提醒',
          duration: 10000,
          onClose: this.closeNotify,//关闭时触发
          dangerouslyUseHTMLString: true,
          position: 'bottom-right',
          message: h('p', [
            h('p', {style: 'cursor:pointer', on: {click: this.linkPath}}, this.errorMsg),
            h('p', {
              style: 'width:100%;text-align: center;width:195px;dispaly:block;margin-top: 8px;color:#43c39d;cursor:pointer',
              on: {click: this.nextNotify}
            }, '下一条'),
          ]),
        });
      },
      // 跳转页面
      linkPath() {
        this.$router.push({path: './sdca'});
      },
      // 关闭消息提示时触发
      closeNotify() {
        this.instance = "";
      },
      // 点击消息提示框内的下一条
      nextNotify() {
        this.instance.close();
        this.instance = "";
        this.errorMsg = "不安全行为超标【星期一第2班次，值为2】-----";
        this.notifyck();
      },
      // 刷新频率
      upArr(data) {
        let that = this;
        setInterval(function () {
          let spliceData = data.splice(0, 1);
          data.push(spliceData[0]);
        }, 2000)
      },
      // 刷新频率
      upArrs(data) {
        let that = this;
        setInterval(function () {
          let spliceData = data.splice(0, 2);
          for (let i = 0; i < spliceData.length; i++) {
            data.push(spliceData[i]);
          }
        }, 2000)
      },
      // 获取pi 目标 单位 mon tue...数据
      loadFun() {
        let that = this;
        const loading = that.$loading({
          lock: true,
          text: '加载中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        that.bcData = [];
        that.resData = [];
        let formDate = new FormData();
        formDate.append('board', "packing");
        // formDate.append('week', that.getYearWeek(that.value1));
        // console.log(that.value1);
        formDate.append('week', that.getYearWeek('2019-08-12'));
        // 获取pi 目标 单位 mon tue...数据
        that.$post('pi/data/board', formDate)
          .then((response) => {
            loading.close();
            that.resData = response.data.pis;
            that.resDataNum = 8 - that.resData.length;
            that.selectValue = that.resData[0].pi;
            that.optionPiId = that.resData[0].piId;
            let res = that.resData;
            // 获取安全优化选项
            // that.exceed(0);
            // that.exceedOne(0);
            that.exceedTwo(0);
            // that.exceedThree(0);
            // 获取pi弹框内统计图数据
            that.monthFun();
            // 获取县重点关注
            that.getSpot();
            let colors = "white";
            for (let i = 0; i < res.length; i++) {
              let bc = res[i].bcData;
              res[i].target = res[i].target.toLowerCase();
              for (let s = 0; s < bc.length; s++) {
                // <!-- 0:大于,1:小于,2:等于,3:大于等于,4:小于等于5:不等于-->
                if (!bc[s].results) {
                  colors = 'white';
                } else if (res[i].warningType == 0) {
                  if (parseFloat(bc[s].results) > parseFloat(res[i].target)) {
                    colors = 'white';
                  } else {
                    colors = 'red';
                  }
                } else if (res[i].warningType == 1) {
                  if (parseFloat(bc[s].results) < parseFloat(res[i].target)) {
                    colors = 'white';
                  } else {
                    colors = 'red';
                  }
                } else if (res[i].warningType == 2) {
                  if (parseFloat(bc[s].results)) {
                    if (parseFloat(bc[s].results) == parseFloat(res[i].target)) {
                      colors = 'white';
                    } else {
                      colors = 'red';
                    }
                  } else {
                    bc[s].results = bc[s].results.toLowerCase()
                    if (bc[s].results == res[i].target) {
                      colors = 'white';
                    } else {
                      colors = 'red';
                    }
                  }
                } else if (res[i].warningType == 3) {
                  if (parseFloat(bc[s].results) >= parseFloat(res[i].target)) {
                    colors = 'white';
                  } else {
                    colors = 'red';
                  }
                } else if (res[i].warningType == 4) {
                  if (parseFloat(bc[s].results) <= parseFloat(res[i].target)) {
                    colors = 'white';
                  } else {
                    colors = 'red';
                  }
                } else if (res[i].warningType == 5) {
                  if (parseFloat(bc[s].results)) {
                    if (parseFloat(bc[s].results) != parseFloat(res[i].target)) {
                      colors = 'white';
                    } else {
                      colors = 'red';
                    }
                  } else {
                    bc[s].results = bc[s].results.toLowerCase()
                    if (bc[s].results != res[i].target) {
                      colors = 'white';
                    } else {
                      colors = 'red';
                    }
                  }
                }
                if (res[i].target === "std.time") {
                  if (bc[s].bc == 1 || bc[s].bc == 3) {
                    if (parseFloat(bc[s].results) < 10) {
                      colors = 'white';
                    } else if (parseFloat(bc[s].results) >= 10) {
                      colors = 'red';
                    }
                  } else if (bc[s].bc == 2) {
                    if (parseFloat(bc[s].results) < 30) {
                      colors = 'white';
                    } else if (parseFloat(bc[s].results) >= 30) {
                      colors = 'red';
                    }
                  }
                }
                bc[s].colors = colors;
              }
              that.bcData.push({
                data: res[i].bcData,
                target: res[i].target,
                warningType: res[i].warningType,
                color: colors,
                auto: res[i].auto,
                pi: res[i].pi,
                piId: res[i].piId
              });
            }
            //循环调用
            // that.forever();
          }).catch(err => {
          loading.close();
          that.$message.error(err);
        })
      },
      onSubmitFn() {
        this.getSpot();
        this.qualitys();
        this.centerDialogVisible = false;
      },
      closePlanFn() {
        this.centerDialogVisible = false;
      },
      // 获取线重点关注对象
      getSpot() {
        let clearTime = null;
        clearInterval(clearTime);
        let that = this;
        that.TeamhotSpotsList = [];
        let dateNum = this.getYearWeek(this.value1);
        let formDate = new FormData();
        formDate.append('token', "fjSkz5yohmoARYHhaDN2tIgajfU=");
        formDate.append('orgid', 36);
        that.$post('pi/spots/inner/querySpots', {})
          .then((response) => {
            that.TeamhotSpotsList = response.data;
            for (let i = 0; i < that.TeamhotSpotsList.length; i++) {
              that.TeamhotSpotsList[i].checkedVerify = false;
            }
            if (that.TeamhotSpotsList.length > 4) {
              that.upArr(response.data);
            } else if (that.TeamhotSpotsList.length < 4) {
              let arrLength = 4 - that.TeamhotSpotsList.length;
              let arr = [];
              // that.numlist = 4 - that.TeamhotSpotsList.length;
              for (let i = 0; i < arrLength; i++) {
                arr.push({topic: "", actionPlan: "", wener: "", dueDate: "", remark: "", checkedVerify: false});
              }
              that.numlist = arr;
              // topic
              // actionPlan
              // wener
              // dueDate
              // remark
            }
          }).catch(err => {
          that.$message.error(err);
        })
        // that.$post('pi/spots/inner/query', formDate)
        //   .then((response) => {
        //     that.TeamhotSpotsList = response.data;
        //     for (let i = 0; i < that.TeamhotSpotsList.length; i++) {
        //       that.TeamhotSpotsList[i].checkedVerify = false
        //     }
        //     if (that.TeamhotSpotsList.length > 4) {
        //       that.upArr(response.data)
        //     } else if (that.TeamhotSpotsList.length < 4) {
        //       let arrLength = 4 - that.TeamhotSpotsList.length;
        //       let arr = [];
        //       // that.numlist = 4 - that.TeamhotSpotsList.length;
        //       for (let i = 0; i < arrLength; i++) {
        //         arr.push({topic: "", actionPlan: "", wener: "", dueDate: "", remark: "", checkedVerify: false})
        //       }
        //       that.numlist = arr;
        //       // topic
        //       // actionPlan
        //       // wener
        //       // dueDate
        //       // remark
        //     }
        //   }).catch(err => {
        //   that.$message.error(err);
        // })
      },
      // 获取安全优化选项
      exceed(num) {
        let that = this;
        that.exceedList = [];
        let res = that.resData;
        let piIds = [];
        let piIdsTwo = [];
        let piIdsThree = [];
        let piIdsFour = [];
        for (let i = 0; i < res.length; i++) {
          if (res[i].piId == "81400862966022144") {
            piIds.push(res[i].piId);
          } else if (res[i].piId == "81405157383864320" || res[i].piId == "81405491338543104" || res[i].piId == "68485743508455424" || res[i].piId == "81403528035172352") {
            piIdsTwo.push(res[i].piId);
          } else if (res[i].piId == '81405722117537792' || res[i].piId == '68754753919647744') {
            piIdsThree.push(res[i].piId);
          } else if (res[i].piId == '81410102233399296') {
            piIdsFour.push(res[i].piId);
          }
        }
        let formDate = new FormData();
        formDate.append("piIds", piIds.join(","));
        formDate.append("bcId", num);
        // 安全优化选项
        that.$post('pi/data/getBcExceed', formDate)
          .then((response) => {
            that.exceedList = response.data;
            if (that.exceedList.length > 4) {
              that.upArr(response.data)
            } else {
              that.exceedNum = 4 - that.exceedList.length;
            }
          }).catch(err => {
          that.$message.error(err);
        })
      },
      exceedOne(num) {
        let that = this;
        that.exceedList = [];
        let res = that.resData;
        let piIds = [];
        let piIdsTwo = [];
        let piIdsThree = [];
        let piIdsFour = [];
        for (let i = 0; i < res.length; i++) {
          if (res[i].piId == "81400862966022144") {
            piIds.push(res[i].piId);
          } else if (res[i].piId == "81405157383864320" || res[i].piId == "81405491338543104" || res[i].piId == "68485743508455424" || res[i].piId == "81403528035172352") {
            piIdsTwo.push(res[i].piId);
          } else if (res[i].piId == '81405722117537792' || res[i].piId == '68754753919647744') {
            piIdsThree.push(res[i].piId);
          } else if (res[i].piId == '81410102233399296') {
            piIdsFour.push(res[i].piId);
          }
        }
        let formDateTwo = new FormData();
        formDateTwo.append("piIds", piIdsTwo.join(","));
        formDateTwo.append("bcId", num);
        // 质量优先选项
        that.$post('pi/data/getBcExceed', formDateTwo)
          .then((response) => {
            that.exceedzlList = response.data;
            if (that.exceedzlList.length > 4) {
              that.upArr(response.data);
            } else {
              that.exceedzlNum = 4 - that.exceedzlList.length;
            }
          }).catch(err => {
          that.$message.error(err);
        })
      },
      exceedTwo(num) {
        let that = this;
        that.exceedList = [];
        let res = that.resData;
        let piIds = [];
        let piIdsTwo = [];
        let piIdsThree = [];
        let piIdsFour = [];
        for (let i = 0; i < res.length; i++) {
          if (res[i].piId == "81400862966022144") {
            piIds.push(res[i].piId);
          } else if (res[i].piId == "81405157383864320" || res[i].piId == "81405491338543104" || res[i].piId == "68485743508455424" || res[i].piId == "81403528035172352") {
            piIdsTwo.push(res[i].piId);
          } else if (res[i].piId == '81405722117537792' || res[i].piId == '68754753919647744') {
            piIdsThree.push(res[i].piId);
          } else if (res[i].piId == '81410102233399296') {
            piIdsFour.push(res[i].piId);
          }
        }
        if (piIdsThree.length === 0) {

        } else {
          let formDateThree = new FormData();
          formDateThree.append("piIds", piIdsThree.join(","));
          formDateThree.append("bcId", num);
          // 班组TOP3优先项
          that.$post('pi/data/getBcExceed', formDateThree)
            .then((response) => {
              that.exceedbzList = response.data;
              if (that.exceedbzList.length > 4) {
                that.upArr(response.data);
              } else {
                that.exceedbzNum = 4 - that.exceedbzList.length;
              }
            }).catch(err => {
            that.$message.error(err);
          })
        }

      },
      exceedThree(num) {
        let that = this;
        that.exceedList = [];
        let res = that.resData;
        let piIds = [];
        let piIdsTwo = [];
        let piIdsThree = [];
        let piIdsFour = [];
        for (let i = 0; i < res.length; i++) {
          if (res[i].piId == "81400862966022144") {
            piIds.push(res[i].piId);
          } else if (res[i].piId == "81405157383864320" || res[i].piId == "81405491338543104" || res[i].piId == "68485743508455424" || res[i].piId == "81403528035172352") {
            piIdsTwo.push(res[i].piId);
          } else if (res[i].piId == '81405722117537792' || res[i].piId == '68754753919647744') {
            piIdsThree.push(res[i].piId);
          } else if (res[i].piId == '81410102233399296') {
            piIdsFour.push(res[i].piId);
          }
        }
        let formDateFour = new FormData();
        formDateFour.append("piIds", piIdsFour.join(","));
        formDateFour.append("bcId", num);
        // 维护需求
        that.$post('pi/data/getBcExceed', formDateFour)
          .then((response) => {
            that.exceedwhList = response.data;
            if (that.exceedwhList.length > 4) {
              that.upArrs(response.data);
            } else {
              that.exceedwhNum = 4 - that.exceedwhList.length;
            }
          }).catch(err => {
          that.$message.error(err);
        })
      },
      // 获取pi弹框内统计图数据
      monthFun() {
        let that = this;
        that.monthList = [];
        let url = "pi/data/report/month";
        let formDate = new FormData();
        formDate.append("piId", that.optionPiId);
        if (that.weekLab == "本周") {
          formDate.append("week", this.getYearWeek(this.value1));
          url = "pi/data/report/week";
        } else {
          url = "pi/data/report/month";
        }
        that.$post(url, formDate)
          .then((response) => {
            let list = response.data;
            let arr = [];
            for (let i = 0; i < list.length; i++) {
              arr.push([list[i].name, list[i].cb, list[i].wcb]);
            }
            arr.unshift(['product', '异常PI', '正常PI',]);
            that.monthList = arr;
            let bigTwoCharts = that.$echarts.init(document.getElementById('echarts-two'));
            that.twoEcharts(bigTwoCharts);
          }).catch(err => {
          that.$message.error(err);
        })
      },
      // 树echarts
      trees() {
        let myChart = this.$echarts.init(document.getElementById('treeEcharts'));
        myChart.showLoading();
        let data = {
          "name": "当班FBI剔除不合格品率（0.6）",
          type: 1,
          "children": [
            {
              "name": "当班FBI合格瓶数（47000）",
              type: 0,
            },
            {
              "name": "当班FBI不合格瓶数（3000）",
              type: 0,
            },
          ]
        }
        myChart.hideLoading();
        data.children.map(function (datum, index) {
          index % 2 === 0 && (datum.collapsed = true);
        });
        let backColor = ['blue', "red"]
        myChart.setOption({
          tooltip: {
            trigger: 'item',
            triggerOn: 'mousemove'
          },
          series: [
            {
              type: 'tree',
              data: [data],
              top: '1%',
              left: '50%',
              bottom: '1%',
              right: '45%',
              symbolSize: 7,
              label: {
                normal: {
                  position: 'left',
                  verticalAlign: 'middle',
                  align: 'right',
                  fontSize: 13,
                  color: backColor[1],
                }
              },

              leaves: {
                label: {
                  normal: {
                    color: backColor[0],
                    position: 'right',
                    verticalAlign: 'middle',
                    align: 'left'
                  }
                }
              },
              itemStyle: {},
              ndCollapse: true,
              animationDuration: 550,
              animationDurationUpdate: 750
            }
          ]
        });
      },
      // 全屏事件
      handleFullScreen() {
        let element = document.documentElement;
        if (this.fullscreen) {
          if (document.exitFullscreen) {
            document.exitFullscreen();
          } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
          } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
          }
        } else {
          if (element.requestFullscreen) {
            element.requestFullscreen();
          } else if (element.webkitRequestFullScreen) {
            element.webkitRequestFullScreen();
          } else if (element.mozRequestFullScreen) {
            element.mozRequestFullScreen();
          } else if (element.msRequestFullscreen) {
            // IE11
            element.msRequestFullscreen();
          }
        }
        this.fullscreen = !this.fullscreen;
      },
      // 滑动事件
      swiperleft: function () {
        // this.$router.push({path: "./sdca"});
      },
      swiperright: function () {
        // this.$router.push({path: "./sdca"});
      },
      // 点击表头下拉跳转页面
      fileck(val) {
        this.fileVerify = false;
        this.$router.push({path: val});
      },
      //页面15分钟无操作时返回首页
      // startTimer() {
      //   let that = this;
      //   that.pathLink()
      // },
      // pathLink(){
      //   let that = this;
      //   setInterval(function () {
      //     // 页面无操作时触发的事件
      //     console.log("触发");
      //     // that.$router.push({path: './sdca'});
      //   }, 5*1000)
      // },
      // isTimeOut() {
      //   let that = this;
      //   // if(that.$route.path == "/") {
      //   that.startTimer();
      //   // }
      //   document.body.onmouseup = that.startTimer;
      //   document.body.onmouseup = that.startTimer;
      //   document.body.onmousemove = that.startTimer;
      //   document.body.onkeyup = that.startTimer;
      //   document.body.onclick = that.startTimer;
      //   document.body.ontouchend = that.startTimer;
      // },
      // 点击轮播图图片时关闭轮播
      shufflingCk() {
        this.shufflingVerify = false;
      },
      // 点击生产计划时触发
      scheduler(num) {
        this.shufflingNum = num
        this.shufflingVerify = true;
      },
      // 星期选择器改变时触发
      weekChange(e) {
        // 获取当前周第一天
        this.firstDate = this.showWeekFirstDay(this.value1);
        // 获取当前周最后一天
        this.lastDate = this.showWeekLastDay(this.value1);
        // 选取的周大于当前周时触发
        if (this.getWeekOfYear() < this.getYearWeek(this.value1)) {
          this.value1 = this.getNowFormatDate();
          this.loadFun();
          this.inputVerify = false;
          this.imgVerify = true;
          this.closeVerify = true;
          this.$message.error('不能选取大于当前的周数');
          return;
        } else if (this.getWeekOfYear() > this.getYearWeek(this.value1)) {
          this.inputVerify = true;
          this.imgVerify = false;
          this.closeVerify = false;
        } else {
          this.closeVerify = true;
          this.inputVerify = false;
          this.imgVerify = true;
        }
        this.loadFun();
      },
      // echarts 柱状
      twoEcharts(myChart) {
        let that = this;
        window.addEventListener("resize", function () {
          myChart.resize();
        })
        myChart.setOption({
          backgroundColor: '#fff',
          tooltip: {
            trigger: 'axis'
          },
          legend: {},
          grid: {
            left: '3%',
            right: '5%',
            containLabel: true
          },
          dataset: {
            source: that.monthList
          },
          xAxis: {
            type: 'category',
          },
          yAxis: {
            type: 'value'
          },
          yAxis: {},
          series: [
            {type: 'bar'},
            {type: 'bar'}
          ]
        })
      },
      // 获取当前时间
      getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
          month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
          strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
      },
      // 获取当前是星期几
      getWeekDate() {
        let day = 0
        switch (new Date().getDay()) {
          case 0:
            day = 7;
            break;
          case 1:
            day = 1;
            break;
          case 2:
            day = 2;
            break;
          case 3:
            day = 3;
            break;
          case 4:
            day = 4;
            break;
          case 5:
            day = 5;
            break;
          case 6:
            day = 6;
        }
        return day;
      },
      // 当前时间转化为周
      getYearWeek(date) {
        date = new Date(date);
        var date2 = new Date(date.getFullYear(), 0, 1);
        var day1 = date.getDay();
        if (day1 == 0) day1 = 7;
        var day2 = date2.getDay();
        if (day2 == 0) day2 = 7;
        var d = Math.round((date.getTime() - date2.getTime() + (day2 - day1) * (24 * 60 * 60 * 1000)) / 86400000);
        return Math.ceil(d / 7) + 1;
      },
      // 获取当前周
      getWeekOfYear() {
        var today = new Date();
        var firstDay = new Date(today.getFullYear(), 0, 1);
        var dayOfWeek = firstDay.getDay();
        var spendDay = 1;
        if (dayOfWeek != 0) {
          spendDay = 7 - dayOfWeek + 1;
        }
        firstDay = new Date(today.getFullYear(), 0, 1 + spendDay);
        var d = Math.ceil((today.valueOf() - firstDay.valueOf()) / 86400000);
        var result = Math.ceil(d / 7);
        return result + 1;
      },
      // 当前周第一天
      showWeekFirstDay(val) {
        var Nowdate = new Date(val);
        var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000);
        var M = Number(WeekFirstDay.getMonth()) + 1;
        return M + "-" + WeekFirstDay.getDate();
      },
      // 当前周最后一天
      showWeekLastDay(val) {
        var Nowdate = new Date(val);
        var WeekFirstDay = new Date(Nowdate - (Nowdate.getDay() - 1) * 86400000);
        var WeekLastDay = new Date((WeekFirstDay / 1000 + 6 * 86400) * 1000);
        var M = Number(WeekLastDay.getMonth()) + 1;
        return M + "-" + WeekLastDay.getDate();
      },
      // 点击数字大于二时触发
      inpCk() {
        if (this.val > 2) {
          this.centerDialogVisible = true
        }
      },
      // 输入框值变化时触发
      inpChange(val, index, itemIndex, obj) {
        let data = {
          piId: this.resData[index].piId,
          bcId: val.bcId ? val.bcId : 0,
          week: this.getYearWeek(this.value1),
          weekday: val.weekday,
          bc: val.bc,
        }
        if (parseFloat(this.resData[index].target) || this.resData[index].target === "0") {
          if (!val.results) {
            data.results = val.results;
            this.$post('pi/data/update', data)
              .then((response) => {
                if (response.status == "2") {
                  this.$message.error(response.msg);
                } else if (response.status == "1") {
                  this.loadFun()
                  this.$message({
                    message: response.msg,
                    type: 'success'
                  });
                }
              }).catch(err => {
              this.$message.error(err);
            })
            return;
          }
          if (val.results == '0') {
            data.results = 0
            this.$post('pi/data/update', data)
              .then((response) => {
                if (response.status == "2") {
                  this.$message.error(response.msg);
                } else if (response.status == "1") {
                  this.loadFun()
                  this.$message({
                    message: response.msg,
                    type: 'success'
                  });
                }
              }).catch(err => {
              this.$message.error(err);
            })
            return;
          }
          if (parseFloat(val.results)) {
            data.results = parseFloat(val.results)
            this.$post('pi/data/update', data)
              .then((response) => {
                if (response.status == "2") {
                  this.$message.error(response.msg);
                } else if (response.status == "1") {
                  this.loadFun()
                  this.$message({
                    message: response.msg,
                    type: 'success'
                  });
                }
              }).catch(err => {
              this.$message.error(err);
            })
          } else {
            this.$message.error("只能输入数字");
            return;
          }
        } else {
          if (parseFloat(val.results)) {
            if (obj.target !== "std.time") {
              val.results = '';
              this.$message.error("不能输入纯数字/数字开头");
              return;
            }
          }
          data.results = val.results
          this.$post('pi/data/update', data)
            .then((response) => {
              if (response.status == "2") {
                this.$message.error(response.msg);
              } else if (response.status == "1") {
                this.loadFun()
                this.$message({
                  message: response.msg,
                  type: 'success'
                });
              }
            }).catch(err => {
            this.$message.error(err);
          })
        }
      },
      // 点击pi柱状图图标触发
      piZhu(val) {
        this.optionPiId = val.piId;
        this.selectValue = val.pi;
        this.apcVerify = true;
        this.monthFun();
      },
      // 关闭放大echarts
      // close(){
      //   this.apcVerify = false;
      // },
      // 弹出框 周月年
      dateCk(index, lab) {
        this.tabIndex = index;
        this.weekLab = lab;
        this.monthFun();
      },
      // 点击弹出框内下拉消失
      echartcontent() {
        this.selectVerify = false;
      },
      // 点击pi图表下拉触发
      selectCk() {
        this.selectVerify = true;
      },
      // 点击下拉框的值时触发
      options(label, val) {
        this.selectVerify = false;
        this.selectValue = label;
        this.optionPiId = val;
        this.monthFun();
      },
      // 点击安全优先项
      txtck(val, close, bc, pi, answer) {
        if (!val) {
          return
        }
        if (this.getWeekOfYear() != this.getYearWeek(this.value1)) {
          return;
        }
        let that = this;
        that.txtVerify = true;
        that.txt = val;
        that.bcId = bc;
        that.piId = pi;
        that.answertree = answer;
        this.addSpots = {type: 1, topic: "", actionPlan: "", wener: ""};
        if (close == 'close') {
          this.closeVerify = false;
        } else {
          this.closeVerify = true;
        }
        setTimeout(function () {
          that.trees()
        }, 500)
      },
      //刷新线重点关注
      refresh() {
        // 获取线重点关注对象
        this.getSpot()
      },
      //下拉回传回来的方法
      selectsFun(val) {
        this.fileVerify = false;
      },
      // 无需处理按钮
      handleClose() {
        let that = this;
        that.$confirm('确认不处理')
          .then(_ => {
            let data = {
              bcId: that.bcId,
              piId: that.piId,
            }
            that.$post('pi/data/handle', data)
              .then((response) => {
                if (response.status == "2") {
                  that.$message.error(response.msg);
                } else if (response.status == "1") {
                  that.txtVerify = false;
                  that.$message({
                    message: response.msg,
                    type: 'success'
                  });
                  that.exceed(0)
                  that.exceedOne(0)
                  that.exceedTwo(0)
                  that.exceedThree(0)
                }
              }).catch(err => {
              that.$message.error(err);
            })
          })
          .catch(_ => {
          });
      },
      // 异常保存
      saveck() {
        this.addSpots.dateNum = this.getYearWeek(this.value1);
        this.$post('piTeamHotSpots/addSpots', this.addSpots)
          .then((response) => {
            if (response.status) {
              this.$message({
                message: response.msg,
                type: 'success'
              });
              this.getSpot()
            } else {
              this.$message.error(response.msg);
            }
          }).catch(err => {
          this.$message.error(err);
        })
        this.centerDialogVisible = false;
        this.txtVerify = false;
      },
      // 退出
      quit() {
        // this.$post('logout', null)
        //   .then((response) => {
        //     console.log(response);
        //   }).catch(err => {
        //   this.$message.error(err);
        // })
        window.location.href = "/"
      },
    },

  }
</script>

<style scoped>
  .menu-container {
    width: 100%;
    z-index: 100;
    box-sizing: border-box;
    /*padding: 5px 5px 0 5px;*/
    padding: 20px 20px 0 20px;

    /*position: relative;*/
  }

  .content-border {
    position: relative;
    width: 100%;
    border: 2px solid #325194;
    box-sizing: border-box;
    border-radius: 10px;
    padding: 10px;
    z-index: 1998;
  }

  .notifyck {
    position: absolute;
    right: 0px;
    bottom: 20px;
    width: 60px;
    height: 30px;
    line-height: 30px;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    z-index: 1999;
    background: #c52d00;
  }


  .header-title {
    display: flex;
    text-align: left;
    justify-content: space-between;
  }

  .header-logo {
    width: 27%;
    display: flex;
    align-items: center;
    height: 50px;
  }

  .header-logo-img {
    width: 83px;
    height: 33px;
  }

  .header-logo-img-vpo {
    height: 57px;
    position: absolute;
    right: 21px;
    top: 0px;
  }

  .week {
    color: #325194;
    font-weight: bold;
    margin-left: 25%;
    line-height: 50px;
  }

  .start-end {
    position: absolute;
    left: 375px;
    color: #325194;
    font-size: 14px;
  }

  .header-header-title {
    width: 65%;
    height: 50px;
    text-align: left;
    color: #325194;
    font-weight: bold;
    letter-spacing: 2px;
    margin-left: 18%;
  }

  .text-width {
    width: 174px;
    text-align: center;
    position: relative;
  }

  .header-vpo {
    width: 8%;
    height: 50px;
    text-align: center;
    box-sizing: border-box;
    padding-top: 10px;
  }

  .table-content {
    display: flex;
    justify-content: space-between;
  }

  .table-left {
    border: 1px solid #325194;
    width: 25%;
    height: 257px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .table-left-pi {
    display: flex;
    color: #fff;
    background-color: #325194;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    font-size: 16px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .table-left-content {
    display: flex;
    height: 225px;
  }

  .table-left-left {
    width: 30%;
    border-right: 1px solid #cecece;
  }

  .table-left-right {
    width: 100%;
  }

  .leftmini {
    width: 30%;
  }

  .rightBig {
    width: 70%;
    text-align: left;
    padding-left: 10px;
    position: relative;
  }

  .fiveAT {
    position: absolute;
    top: 4px;
    right: 5px;
    padding: 1px 2px;
    background-color: rgb(199, 47, 0);
    /*width: 18px;*/
    /*height: 18px;*/
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
  }

  .fiveS {
    position: absolute;
    top: 4px;
    right: 52px;
    padding: 1px 5px;
    /*width: 18px;*/
    /*height: 18px;*/
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    background-color: #d1cf2c;
    color: #fff;
    font-size: 12px;
  }

  .fiveW {
    position: absolute;
    top: 4px;
    right: 30px;
    padding: 1px;
    /*width: 18px;*/
    /*height: 18px;*/
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    background-color: #325194;
    color: #fff;
    font-size: 12px;
  }

  .fiveAT-num {
    position: absolute;
    top: 1px;
    right: 48px;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 12px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    font-size: 12px;
  }

  .fiveS-num {
    position: absolute;
    top: 1px;
    right: 25px;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 12px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    font-size: 12px;
  }

  .five-num {
    position: absolute;
    top: 1px;
    right: 0px;
    width: 12px;
    height: 12px;
    text-align: center;
    line-height: 12px;
    border-radius: 50%;
    background-color: red;
    color: #fff;
    font-size: 12px;
  }

  .table-left-right-content {
    height: 28.1px;
    line-height: 28.1px;
    border-bottom: 1px solid #cecece;
    box-sizing: border-box;
    position: relative;
  }

  .kpi-txt {
    width: 67%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pi-td {
    display: flex;
  }


  .borderR {
    border-right: 1px solid #cecece;
  }

  .table-center {
    width: 74%;
    height: 257px;
    display: flex;
    justify-content: space-between;
  }

  .table-center-left {
    width: 14%;
    /*width: 13%;*/
    border: 1px solid #325194;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    margin-right: 1%;
  }

  .table-center-text {
    flex: 1;
    color: #fff;
    background-color: #325194;
    height: 30px;
    font-size: 12px;
    text-align: center;
  }

  .table-center-table {

  }

  .table-center-right-content {
    display: flex;
    height: 28.1px;
    line-height: 28.1px;
    box-sizing: border-box;
  }

  .table-center-right-content div {
    flex: 1;
    border: 1px solid #cecece;
    border-left: none;
    border-top: none;
  }

  .table-center-right-contents {
    display: flex;
    height: 28.1px;
    line-height: 28.1px;
    box-sizing: border-box;
  }

  .table-center-right-contents div {
    flex: 1;
    border: 1px solid #cecece;
    border-right: none;
    border-top: none;
  }

  .table-center-right {
    width: 89%;
    border: 1px solid #325194;
    /*border-right: none;*/
    border-top-left-radius: 5px;
  }

  .table-center-week {
    display: flex;
    width: 100%;
  }

  .table-center-week div {
    flex: 1;
    color: #fff;
    background-color: #325194;
    height: 30px;
    font-size: 12px;
    text-align: center;
  }

  .section-title {
    display: flex;
  }

  .section-title section {
    flex: 1;
  }

  .table-right {
    border-right: 1px solid #c72f00;
    border-bottom: 1px solid #c72f00;
    border-top-right-radius: 5px;
    width: 8.6%;
    margin-left: -10px;
  }

  .table-right-content {
    border-right: none;
  }

  .table-left-remark {
    color: #fff;
    background-color: #c72f00;
    border-top-right-radius: 5px;
    height: 31px;
    font-size: 12px;
  }

  .table-left-right-contents {
    height: 25px;
    border-bottom: 1px solid #cecece;
    border-left: 1px solid #cecece;
    box-sizing: border-box;
  }

  .safety {
    display: flex;
    margin-top: 10px;
  }

  .safety section {
    flex: 1;
    border: 1px solid #325194;
    height: 130px;
    width: 23.5%;
  }

  .safety-title {
    background-color: #325194;
    height: 30px;
    /*line-height: 30px;*/
    font-size: 12px;
    text-align: left;
    color: #fff;
    letter-spacing: 1px;
    box-sizing: border-box;
    /*padding-left: 10px;*/
    text-align: center;
  }

  .safety-titlet {
    background-color: #325194;
    height: 32px;
    /*line-height: 30px;*/
    font-size: 12px;
    text-align: left;
    color: #fff;
    letter-spacing: 1px;
    box-sizing: border-box;
    /*padding-left: 10px;*/
    text-align: center;
  }

  .plan {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 10px;
  }

  .plan-left {
    border: 1px solid #325194;
    width: 17%;
    height: 172px;
  }

  .plan-center {
    border: 1px solid #325194;
    width: 17%;
    height: 172px;
  }

  .plan-right {
    border: 1px solid #325194;
    width: 65%;
    height: 172px;
    overflow: hidden;
  }

  .emphasis {
    display: flex;
    justify-content: space-between;
    width: 100%;
    background-color: #325194;
  }

  .emphasis section {
    border-left: 1px solid #cecece;
  }

  .plan-select {
    width: 3%;
  }

  .theme {
    width: 32%;
    text-align: left;
  }

  .action {
    width: 31%;
    text-align: left;
  }

  .person {
    width: 12%;
  }

  .accomplish {
    width: 12%;
  }

  .plan-remark {
    width: 10%;
    text-align: left;
  }

  .safety-titles {
    background-color: #1a8dc4;
    width: 100%;
    height: 30px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    letter-spacing: 2px;
    position: relative;
  }

  .yellow {
    width: 19px;
    height: 22px;
    text-align: center;
    border-radius: 50%;
    background-color: #fad50a;
  }

  .red {
    text-align: center;
    color: red;
  }

  .white {
    text-align: center;
    /*background-color: #fff;*/
  }

  .inp:focus {
    border: none;
    border-color: #03a9f4;
    box-shadow: 0 0 15px #03a9f4;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 150px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: rgba(0, 0, 0, 0.2)
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: rgba(0, 0, 0, 0.2)
  }

  .shuffling-content {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1999;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .shuffling {
    margin: 3% auto;
    width: 90%;
    height: 90%;
  }

  .el-carousel__arrow--left {
    margin-top: 100px !important;
  }

  .iframe-content {
    height: 90vh;
    overflow: hidden;
  }

  .show-iframe {
    width: 100%;
    height: 100%;
    margin-right: -25px;
  }

  .sectt {
    height: 27.5px;
    line-height: 27.5px;
    border: 1px solid #cecece;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
  }

  .pi-zhu {
    width: 15px;
    height: 15px;
    position: absolute;
    right: 10px;
    top: 3px;
    z-index: 995;
  }

  #echarts-two {
    border-radius: 5px;
    width: 60vw;
    height: 50vh;
  }

  .echarts-title {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #fff;
    text-align: left;
    box-sizing: border-box;
    padding-left: 50px;
  }

  .echarts-main {
    border-bottom: 1px solid #c72f00;
    color: #c72f00;
    height: 50px;
    line-height: 50px;
    width: 37%;
    display: flex;
    justify-content: space-between;
  }

  .echarts-content {
    position: absolute;
    left: 20%;
    top: 20%;
    width: 60vw;
    height: 50vh;
  }

  .dates {
    position: absolute;
    top: 50px;
    right: 0;
    background-color: #fff;
    z-index: 1999;
  }

  .dates div {
    padding: 5px 10px
  }

  .bcg {
    background-color: #ebebe3;
    padding: 5px 10px
  }

  .select-sapn {
    margin-left: 20px;
    display: flex;
    align-items: center;
  }

  .select-img {
    width: 45px;
    height: 45px;
    margin-left: 10px;
  }

  .select-content {
    width: 155px;
    background-color: #fff;
    border: 1px solid #c72f00;
    border-top: none;
    z-index: 999;
    position: absolute;
    left: 3.8vw;
  }

  .options {
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .options:last-child {
    border-bottom: none;
  }

  .more {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .loadings {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1998;
  }

  .txt {
    background-color: #fff;
    width: 50vw;
    /*height: 45vh;*/
    margin: 15vh auto;
    padding: 30px;
    border-radius: 5px;
    font-size: 16px;
    position: relative;
  }

  /*.Priorities {*/
  /*  height: 25px;*/
  /*  line-height: 25px;*/
  /*  border: 1px solid #cecece;*/

  /*}*/
  .priorities-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .Priorities:nth-child(odd) {
    border: none;
    color: red;
  }

  .Priorities:nth-child(even) {
    color: green;
    border-top: none;
  }

  .Priorities-two:nth-child(even) {
    border-top: 1px solid #aaa;
  }

  .Priorities-two div:nth-child(odd) {
    border: none;
    color: red;
  }

  .Priorities-two div:nth-child(even) {
    color: green;
    border-top: none;
  }

  .Priorities div {
    box-sizing: border-box;
    padding-left: 2px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    text-align: left;
  }

  .Priorities img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
  }

  .file-div {
    position: absolute;
    top: 20px;
    border: 1px solid #325194;
    left: 3vw;
    background-color: #fff;
    z-index: 96;
  }

  .file-div div {
    padding: 10px;
  }

  .flags {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    right: 0;
    top: 0;
  }

  .abnormal {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid #c52d00;
    text-align: left;
  }

  .abnormal td {
    border: 1px solid #aaa;
    box-sizing: border-box;
    padding-left: 10px;
  }

  .abnormal-one-td-bcg {
    background-color: #c72f00;
    text-align: center;
    color: #fff;
  }

  .abnormal-one-td-content {
    text-align: center;
  }

  .abnormal-info {
    text-align: center;
    background-color: #c52d00;
    color: #fff;
    margin-top: 20px;
  }

  .abnormal-two {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
  }

  .abnormal-two td {
    border-top: 1px solid #aaa;
    border-right: none;
    border-left: none;
  }

  .abnormal-two td:first-child {
    border-top: none;
  }

  .trigger {
    display: flex;
  }

  .trigger div {
    box-sizing: border-box;
    padding-left: 10px;
    width: 50%;
    border: 1px solid #aaa;
  }

  .trigger div:last-child {
    border-left: none;
  }

  .measures {
    height: 50px;
    border: 1px solid #aaa;
  }

  .personnel {
    display: flex;
  }

  .personnel-title {
    box-sizing: border-box;
    padding-left: 10px;
    width: 15%;
    border: 1px solid #aaa;
  }

  .personnel-num {
    box-sizing: border-box;
    padding-left: 10px;
    width: 85%;
    border: 1px solid #aaa;
    border-left: none;
  }

  .hui {
    background-color: #f0f0f0 !important;
  }

  .Priorities-two-div {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .Priorities-two-div {
    height: 25px;
    line-height: 25px;
    width: 100%;
  }

  .blackColor {
    color: #000 !important;
  }

  .header-name {
    height: 57px;
    position: absolute;
    right: 200px;
    top: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
  }

  .header-organ {
    height: 57px;
    position: absolute;
    right: 160px;
    top: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
  }

  .quit {
    height: 57px;
    position: absolute;
    right: 120px;
    top: 25px;
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
  }

  .backgr {
    background-color: #aaaaaa;
  }

  .enablered {
    color: red;
  }

  .emphasis-input {
    width: 100%;
    height: 83%;
  }
  .TeamhotSpots{
    width: 95%;
    height: 83%;
  }
</style>
